<template>
	<view>
		<view class="rent">
			<view class="rentTop">
				<!-- //顶部图片 -->
				<image :src="activity.img"></image>
			</view>
			<scroll-view scroll-y="true" class="rent-center">
				<view class="rent-description">
					<view class="rent-desc-location"> 
						<!-- 起止日期 -->
						<view class="date">
							<text> {{activity.startdate}} - {{activity.enddate}}</text>
						</view>
						<!-- 报名情况 -->
						<view class="people">
							<text>已报名</text>
							<text style="color: #FEC06A;"> {{activity.number_signup}}</text>
							<text style="font-weight: bold;">/</text>
							<text>{{activity.number_need}}人</text>
						</view>
					</view>
					<view class="rent-desc-des">
						<view class="rent-desc-des-text">{{activity.brief}}</view>
					</view>
				</view>
				<view class="cooperation_message">
					<!-- 发起人 -->
					<view class="leader">
						<view class="message-icon-left">
							<image src="http://p1362.bvimg.com/10465/bcdcebc29fb892bc.png"></image>
						</view>
						<view class="message-text">
							<view class="message-text-content"><text>{{activity.iniciator}}</text></view>
						</view>
						<view class="message-icon-right">
							<image src="http://p1362.bvimg.com/10465/445bb715437347d8.png"></image>
						</view>
					</view>
					<!-- 位置 -->
					<view class="location">
						<view class="message-icon-left">
							<image src="http://p1362.bvimg.com/10465/50897b4b65c7deb7.png"></image>
						</view>
						<view class="message-text">
							<view class="message-text-content"><text>
									< 1km&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{activity.place}}</text>
							</view>
						</view>
						<view class="message-icon-right">
							<image src="http://p1362.bvimg.com/10465/623391b449d77616.png"></image>
						</view>
					</view>
				</view>
				<view class="activity-detail-title">
					<text>&nbsp;&nbsp;活动详情</text>
				</view>
				<view class="cross-line"></view>
				<view class="cross-line"></view>
				<view class="cross-line"></view>
				<view class="activity-detail">
					<view class="activity-detail-text">
						<!-- 起止日期 -->
						<view class="blankline"></view>
						<view class="activity-detail-text-line1">
							活动开始/结束日期:\n
						</view>
						<view class="activity-detail-text-line2">
							{{activity.startdate}} - {{activity.enddate}}
						</view>
						<!-- 空行 -->
						<view class="blankline"></view>
						<!-- 起止时间 -->
						<view class="activity-detail-text-line1">
							活动开始/停止时间：
						</view>
						<view class="activity-detail-text-line2">
							{{activity.starttime}} - {{activity.endtime}}
						</view>
						<!-- 空行 -->
						<view class="blankline"></view>
						<!-- 主要内容 -->
						<view class="activity-detail-text-line1">
							主要内容：
						</view>
						<view class="activity-detail-text-line2">
							<text> {{content}} </text>
						</view>
					</view>
				</view>
				<!-- 我的报名信息，自己可见-->
				<view class="mysign" v-show="ifmysign()">
					<view class="mysigntitle">
						<text>我的报名信息</text>
					</view>
					<view class="cooperation_message">
						<!-- 姓名 -->
						<view class="name">
							<view class="name-text">
								<view class="name-text-content">
									<text>姓名</text>
									<view style="width: 30rpx;"></view>
									<text style="color: #ffbc6a;font-weight: bolder;">|</text>
									<view style="width: 30rpx;"></view>
									<text>{{mysign.name}}</text>
								</view>
							</view>
						</view>
						<!-- 电话 -->
						<view class="phone">
							<view class="phone-text">
								<view class="phone-text-content">
									<text>电话</text>
									<view style="width: 30rpx;"></view>
									<text style="color: #ffbc6a;font-weight: bolder;">|</text>
									<view style="width: 30rpx;"></view>
									<text>{{mysign.phone}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 报名信息，发布者可见 -->
				<view class="signs" v-show="ifmyrelease()">
					<view class="mysigntitle">
						<text>报名者</text>
					</view>
					<view v-for="(item,index) in signers" :key="signers.id">
						<view class="cooperation_message">
							<!-- 序号 -->
							<view class="name">
								<view class="name-text">
									<view class="name-text-content">
										<text>序号</text>
										<view style="width: 30rpx;"></view>
										<text style="color: #ffbc6a;font-weight: bolder;">|</text>
										<view style="width: 30rpx;"></view>
										<text style="color: #65ba65;">{{index+1}}</text>
									</view>
								</view>
							</view>
							<!-- 姓名 -->
							<view class="name">
								<view class="name-text">
									<view class="name-text-content">
										<text>姓名</text>
										<view style="width: 30rpx;"></view>
										<text style="color: #ffbc6a;font-weight: bolder;">|</text>
										<view style="width: 30rpx;"></view>
										<text>{{item.name}}</text>
									</view>
								</view>
							</view>
							<!-- 电话 -->
							<view class="phone">
								<view class="phone-text">
									<view class="phone-text-content">
										<text>电话</text>
										<view style="width: 30rpx;"></view>
										<text style="color: #ffbc6a;font-weight: bolder;">|</text>
										<view style="width: 30rpx;"></view>
										<text>{{item.phone}}</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 分割线 -->
						<view style="height: 30rpx;"></view>
					</view>
				</view>
			</scroll-view>

			<!-- 底部报名按钮 -->
			<view class="footer" v-show="buttonflag()">
				<!-- 我加入的 -->
				<button class="footer-buttom" @click="goto('../cooperationJoin/cooperationJoin')">
					<view class="icon_name">我要报名</view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activity: {},
				flag: "common",
				//根据id获得content
				content: "",
				mysign: {
					id: 0,
					name: "杜雨茜",
					phone: "15700165373"
				},
				signers: [{
						id: 1,
						name: "张坤",
						phone: "15700111111"
					},
					{
						id: 2,
						name: "沈宁",
						phone: "15700222222"
					},
					{
						id: 3,
						name: "符蓝天",
						phone: "15700333333"
					}
				]
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			// 获取上个页面传过来的activity对象
			const activity = JSON.parse(decodeURIComponent(option.activity));
			const flag = option.flag;
			// console.log(activity);
			console.log(flag);
			this.activity = activity;
			if (flag != null)
				this.flag = flag;
			// this.activity=activity;
			this.content =
				"城市生活垃圾分类收集工作是实施垃圾减量化、资源化、无害化的一个十分重要的步骤，对于改善人民环境，实现城市的可持续发展，创建节约型社会具有重要意义。城市生活垃圾分类收集，不仅关系到城市的文明程度和城市形象，也是城市生态环境建设最基础的工作，更是一项利国利民的事业。";
		},
		methods: {
			buttonflag() {
				if (this.flag == "sign" || this.flag == "release")
					return false;
				else
					return true;
			},
			ifmysign() {
				if (this.flag == "sign")
					return true;
				else
					return false;
			},
			ifmyrelease() {
				if (this.flag == "release")
					return true;
				else
					return false;
			}
		}
	}
</script>
<style lang="scss">
	@import '@/common/iconfont.css';
	@import '@/common/uni-nvue.scss';

	page {
		background: #f5f4f8;
	}

	.rentTop {
		width: 100%;
		height: 350rpx;
		margin-bottom: 10rpx;
		display: flex;
	}

	.rentTop image {
		width: 100%;
		height: 100%;
	}

	.rent-center {
		height: 1040rpx;

		.rent-description,
		.rent-preview,
		.rent-hostWords {
			background: #FFFFFF;
			margin: 14rpx 0;
			padding: 10rpx 20rpx;

			.rent-desc-location {
				margin: 10rpx 0;
				font-size: 28rpx;
				color: #8E8E9B;
				display: flex;
			}

			.date {
				width: 50%;
			}

			.people {
				width: 50%;
				text-align: right;
			}

			.rent-desc-des {
				.rent-desc-des-text {
					line-height: 54rpx;
					font-size: 40rpx;
					font-weight: bolder;
					margin-top: 20rpx;
				}
			}

			.crossline {
				height: 5rpx;
				width: 100%;
				background-color: #FEF0D2;
			}

			.rent-desc-label-top,
			.rent-desc-label-bottom {
				margin-top: 14rpx;
				display: flex;
				align-items: center;

				.rent-desc-text {
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 4rpx 12rpx;
					padding: 0rpx 6rpx;
					margin-left: 4rpx;
					font-size: 26rpx;
					color: #A1BF56;
					border: 2rpx solid #A1BF56;
					border-radius: 10rpx;
				}

				.rent-desc-textFixed1 {
					background: #EAF8E8;
					color: #416426;
				}

				.rent-desc-textFixed2 {
					background: #F5F2E6;
					color: #7a6d4b;
				}
			}
		}
	}

	.rent-desc-location text:nth-child(2) {
		margin: 0 6rpx;
	}

	.rent-desc-location text:nth-child(3) {
		margin: 0 6rpx;
	}

	.rent-desc-location text:nth-child(4) {
		margin: 0 6rpx;
	}

	//发起人信息
	.cooperation_message {
		height: 200rpx;
	}

	.leader {
		height: 70rpx;
		display: flex;
		background-color: #FFFFFF;
	}

	.location {
		height: 70rpx;
		margin-top: 10rpx;
		display: flex;
		background-color: #FFFFFF;
	}

	.message-icon-left {
		height: 70rpx;
		width: 70rpx;
	}

	.message-icon-left image {
		height: 30rpx;
		width: 30rpx;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}

	.message-text {
		height: 90rpx;
		width: 520rpx;
	}

	.message-text-content {
		font-size: small;
		margin-top: 15rpx;
		margin-left: 40rpx;
	}

	.message-icon-right {
		text-align: right;
	}

	.message-icon-right image {
		height: 30rpx;
		width: 30rpx;
		margin-top: 20rpx;
		margin-left: 100rpx;
	}

	.activity-detail {
		background-color: #FFFFFF;
	}

	.activity-detail-text {
		margin-top: 10rpx;
		margin-left: 20rpx;
	}

	.blankline {
		background-color: #FFFFFF;
		height: 10rpx;
	}

	.activity-detail-title {
		margin-left: 20rpx;
	}

	.activity-detail-title text {
		font-size: medium;
		font-weight: bold;
	}

	.activity-detail-text-line0 {

		font-size: xx-small;
	}

	.activity-detail-text-line1 {
		font-size: small;
		font-weight: bold;
		color: #5f5f5f;
		margin-top: 20rpx;
	}

	.activity-detail-text-line2 {
		font-size: small;
		margin-top: 3rpx;
		color: #5f5f5f;
		margin-right: 20rpx;
		margin-bottom: 50rpx;
	}

	// 我的报名信息
	.mysigntitle {
		width: 26%;
		height: 60rpx;
		margin-left: 1.5%;
		margin-bottom: 40rpx;
		border: 6rpx solid #FEC06B;
		border-radius: 20rpx;
		align-content: center;
		display: flex;
		justify-content: center;
		// padding:6rpx;
		// background-color: #00AA7F;
	}

	.mysigntitle text {
		color: #FEC06B;
		font-size: small;
		font-weight: bold;
		margin-top: 10rpx;
	}

	.name,
	.phone {
		height: 70rpx;
		margin-top: -10rpx;
		display: flex;
		background-color: #FFFFFF;
	}

	.name-text,
	.phone-text {
		height: 90rpx;
		width: 520rpx;
	}

	.name-text-content,
	.phone-text-content {
		font-size: small;
		margin-top: 15rpx;
		margin-left: 40rpx;
		display: flex;
	}

	.nametitle text,
	.phonetitle text {}

	/* 底部导航条 */
	.footer {
		/* background-color: #FEEFD1; */
		color: #fff;
		height: 110rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 0 auto;
		background-color: #FFFFFF;
	}

	.footer-buttom {
		width: 260rpx;
		margin: 0 30rpx;
		background-color: #71a26b;
		border: 0;
		border-radius: 18rpx;
		margin-bottom: 15rpx;
		margin-top: 1;
	}

	.icon_name {
		color: #FFFFFF;
		font-size: medium;
		font-weight: bold;
		/* margin-bottom: 10rpx; */
	}
</style>
